import { AudioOutlined, DesktopOutlined, VideoCameraOutlined } from '@ant-design/icons'
import React, { CSSProperties } from 'react'
import getShareWindow from 'src/components/share_window'
import TRTCCloud, { ENUM_EVENT } from 'src/lib/srtc-electron-sdk'

const itemIconStyle: CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '12px',
  color: '#333',
  margin: '0 12px',
  cursor: 'default'
}

export function Microphone(props: { open: boolean; trtc: TRTCCloud }) {
  const { trtc, open } = props
  if (open) {
    return (
      <div
        style={itemIconStyle}
        onClick={() => {
          trtc.closeMicrophone()
          trtc.emit(ENUM_EVENT.REMOTE_AUDIO_REMOVE, null)
        }}
      >
        <AudioOutlined style={{ color: '#1890ff', fontSize: '26px', verticalAlign: 'middle' }} />
        <span>静音</span>
      </div>
    )
  }
  return (
    <div
      style={itemIconStyle}
      onClick={() => {
        trtc.openMicrophone()
        trtc.emit(ENUM_EVENT.REMOTE_AUDIO_ADD, null)
      }}
    >
      <AudioOutlined style={{ color: '#ccc', fontSize: '26px', verticalAlign: 'middle' }} />
      <span style={{ color: '#ccc' }}>解除静音</span>
    </div>
  )
}
export function Camera(props: { open: boolean; trtc: TRTCCloud; view: React.RefObject<HTMLDivElement> }) {
  const { trtc, open, view } = props
  if (open) {
    return (
      <div
        style={itemIconStyle}
        onClick={() => {
          trtc.closeCamera()
          trtc.emit(ENUM_EVENT.REMOTE_VIDEO_REMOVE, null)
        }}
      >
        <VideoCameraOutlined style={{ color: '#1890ff', fontSize: '26px', verticalAlign: 'middle' }} />
        <span>停止视频</span>
      </div>
    )
  }
  return (
    <div
      style={itemIconStyle}
      onClick={() => {
        if (!view || !view.current) return
        trtc.openCamera(view.current)
        trtc.emit(ENUM_EVENT.REMOTE_VIDEO_ADD, null)
      }}
    >
      <VideoCameraOutlined style={{ color: '#ccc', fontSize: '26px', verticalAlign: 'middle' }} />
      <span style={{ color: '#ccc' }}>开启视频</span>
    </div>
  )
}
export function Desktop(props: { open: boolean; trtc: TRTCCloud; view: React.RefObject<HTMLDivElement> }) {
  const { open, trtc, view } = props
  if (props.open) {
    return (
      <>
        <div
          style={itemIconStyle}
          onClick={() => {
            trtc.stopScreenCapture()
            trtc.emit(ENUM_EVENT.SCREEN_SHARE_REMOVE, null)
          }}
        >
          <DesktopOutlined style={{ color: 'orange', fontSize: '26px', verticalAlign: 'middle' }} />
          <span style={{ color: 'orange' }}>暂停共享</span>
        </div>
        <div
          style={itemIconStyle}
          onClick={() => {
            getShareWindow(trtc).then((val) => {
              if (!val || !view || !view.current) return
              trtc.startScreenCapture(val as any, view.current)
              trtc.emit(ENUM_EVENT.SCREEN_SHARE_ADD, null)
            })
          }}
        >
          <DesktopOutlined style={{ color: 'green', fontSize: '26px', verticalAlign: 'middle' }} />
          <span style={{ color: 'green' }}>新的共享</span>
        </div>
        <div
          style={itemIconStyle}
          onClick={() => {
            trtc.stopScreenCapture()
            trtc.emit(ENUM_EVENT.SCREEN_SHARE_REMOVE, null)
          }}
        >
          <DesktopOutlined style={{ color: 'red', fontSize: '26px', verticalAlign: 'middle' }} />
          <span style={{ color: 'red' }}>结束共享</span>
        </div>
      </>
    )
  }
  return (
    <div
      style={itemIconStyle}
      onClick={() => {
        getShareWindow(trtc).then((val) => {
          if (!val || !view || !view.current) return
          trtc.startScreenCapture(val as any, view.current)
          trtc.emit(ENUM_EVENT.SCREEN_SHARE_ADD, null)
        })
      }}
    >
      <DesktopOutlined style={{ color: '#ccc', fontSize: '26px', verticalAlign: 'middle' }} />
      <span style={{ color: '#ccc' }}>开启共享</span>
    </div>
  )
}
